import React, { Component } from 'react';

import store from '../../../redux/store';
import { connect } from 'react-redux';

import { Switch, Select, message } from 'antd';

import { Chart } from '@antv/g2';

import Object3d from '../3d';
import { switchTracking, shipVisual } from '../3d/scene';
import { transparentShip } from '../3d/ship';
import { setSmallWindow, updatelookAtObject } from '../3d/scene/setWindow';
import { rightWindowInfo } from '../requestParent';

import './index.less';

const { Option } = Select;

class ToolCol1 extends Component {

    render() {
        const {
            speed, // 航速
            draft, // 船体吃水
            course,// 航向
            GPS, // gps
        } = this.props.scenePageInfo;

        return (
            <div className='tool-col'>
                <ul>
                    <li>
                        <i />
                        <span>航速</span>
                        <span>{speed}</span>
                    </li>
                    <li>
                        <i />
                        <span>船体吃水</span>
                        <span>{draft}</span>
                    </li><li>
                        <i />
                        <span>航向</span>
                        <span>{course}</span>
                    </li><li>
                        <i />
                        <span>GPS</span>
                        <span>{GPS}</span>
                    </li>

                </ul>
            </div>
        );
    }
}

class ToolCol2 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            switch_btn: false,
            watch_btn: 2,
            fov_btn: 2,
        };
    }

    onSwitchBtn = (checked) => {
        // 船体透明
        transparentShip(checked);
        this.setState({
            switch_btn: checked,
        })
    }

    onWatchBtn = (num) => {
        if (this.state.fov_btn === 1) {
            message.warning('舱内视角下仅支持移动观察视角');
            return;
        }
        switchTracking(num);
        this.setState({
            watch_btn: num,
        })
    }

    onFovBtn = (num) => {
        shipVisual(num);
        if (num === 1) {
            switchTracking(num);
            this.setState({
                fov_btn: num,
                watch_btn: num,
            })
        } else {
            this.setState({
                fov_btn: num,
            })
        }

    }

    render() {
        const { switch_btn, watch_btn, fov_btn } = this.state;
        return (
            <div className='tool-col'>
                <div className='col-box'>
                    <span className='span-title'>船体透明</span>
                    <Switch size="small" onChange={this.onSwitchBtn} />
                    <span className='span-title'>{switch_btn ? `on ` : 'off'}</span>
                </div>
                <div className='col-box'>
                    <div className='col-btns'>
                        <div className={watch_btn === 1 ? 'col-btn selected' : 'col-btn'} onClick={() => { this.onWatchBtn(1) }}>移动观察</div>
                        <div className={watch_btn === 2 ? 'col-btn selected' : 'col-btn'} onClick={() => { this.onWatchBtn(2) }}>静止观察</div>
                        <div className={watch_btn === 3 ? 'col-btn selected' : 'col-btn'} onClick={() => { this.onWatchBtn(3) }}>围绕船体</div>
                    </div>
                </div>
                <div className='col-box'>
                    <div className='col-btns'>
                        <div className={fov_btn === 1 ? 'col-btn selected' : 'col-btn'} onClick={() => { this.onFovBtn(1) }}>舱内视角</div>
                        <div className={fov_btn === 2 ? 'col-btn selected' : 'col-btn'} onClick={() => { this.onFovBtn(2) }}>舱外视角</div>
                    </div>
                </div>
            </div>
        );
    }
}

class ToolCol3 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            current_time: new Date().Format("h:m:s yyyy-M-d"),
        };
    }

    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({
            current_time: new Date().Format("h:m:s yyyy-M-d")
        });
    }

    render() {
        const { current_time } = this.state;

        const { tidemark } = this.props.scenePageInfo; // 潮位

        return (
            <div className='tool-col'>
                <img alt="" />
                <div className='col-time-box'>
                    <i />
                    <span>{current_time}</span>
                </div>
                <div className='col-tidemark-box'>
                    <i />
                    <span>潮位</span>
                    <span>{tidemark}</span>
                </div>
            </div>
        );
    }
}

// 左边2个窗口
class LeftWinWrap extends Component {

    data = [
        { time: '00:00', 左耙: 8, 右耙: 6 },
        { time: '04:00', 左耙: 5.5, 右耙: 4 },
        { time: '08:00', 左耙: 7.5, 右耙: 6.5 },
        { time: '12:00', 左耙: 4.5, 右耙: 9 },
        { time: '16:00', 左耙: 7, 右耙: 7 },
        { time: '20:00', 左耙: 4, 右耙: 4 },
    ];

    constructor(props) {
        super(props);
        this.state = {};
    }

    // 创建折线图
    createChart = (container, data) => {
        const chart = new Chart({
            container,
            autoFit: true,
            height: 500,
        });

        chart.data(data);
        chart.scale({
            time: {
                range: [0, 1],
            },
            '左耙': {
                min: 0,
                max: 12,
                nice: true,
            },
            '右耙': {
                min: 0,
                max: 12,
                nice: true,
            }
        });

        chart.axis('右耙', false);

        chart
            .line()
            .position('time*左耙')
            .color('#0090fa')
            .shape('smooth');

        chart
            .line()
            .position('time*右耙')
            .color('#fada00')
            .shape('smooth');

        chart.legend(false);
        chart.render();
    }

    componentDidUpdate(prevProps) {
        const { shrink1: prevShrink1, shrink2: prevShrink2 } = prevProps;
        const { shrink1, shrink2 } = this.props;

        if (prevShrink1 !== shrink1 && !shrink1) this.createChart('left-win-chart1', this.data);
        if (prevShrink2 !== shrink2 && !shrink2) this.createChart('left-win-chart2', this.data);
    }

    componentDidMount() {
        const { shrink1, shrink2 } = this.props;
        if (!shrink1) this.createChart('left-win-chart1', this.data);
        if (!shrink2) this.createChart('left-win-chart2', this.data);
    }

    render() {
        const { shrink1, shrink2, wrapShrink } = this.props;
        return (
            <div className='window-wrap left-window-boxs'>

                {
                    (shrink1)
                        ?
                        <div className='win-wrap shrink'>
                            <img alt="" onClick={() => { wrapShrink(1) }} />
                            浓度
                        </div>
                        :
                        <div className='win-wrap'>
                            <img alt="" onClick={() => { wrapShrink(1) }} />
                            <div className='win-wrap-head'>
                                <span>浓度</span>
                                <div className='chart-legend'>
                                    <i className='legend-icon-yellow' />
                                    <span>右耙 1.13</span>
                                </div>
                                <div className='chart-legend'>
                                    <i className='legend-icon-blue' />
                                    <span>左耙 1.12</span>
                                </div>
                            </div>
                            <div id='left-win-chart1' className='win-wrap-view' />
                        </div>
                }

                {
                    (shrink2)
                        ?
                        <div className='win-wrap shrink'>
                            <img alt="" onClick={() => { wrapShrink(2) }} />
                            流速
                        </div>
                        :
                        <div className='win-wrap'>
                            <img alt="" onClick={() => { wrapShrink(2) }} />
                            <div className='win-wrap-head'>
                                <span>流速</span>
                                <div className='chart-legend'>
                                    <i className='legend-icon-yellow' />
                                    <span>右耙 1.13</span>
                                </div>
                                <div className='chart-legend'>
                                    <i className='legend-icon-blue' />
                                    <span>左耙 1.12</span>
                                </div>
                            </div>
                            <div id='left-win-chart2' className='win-wrap-view' />
                        </div>
                }
            </div>
        )
    }
}

// 右边两个窗口
class RightWinWrap extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    // 初始化
    componentDidMount() {
        const { shrink3, shrink4 } = this.props;

        if (!shrink3) setSmallWindow(1, this.wrap1);
        if (!shrink4) setSmallWindow(2, this.wrap2);
    }

    componentDidUpdate(prevProps, prevState) {

        const { shrink3: prevShrink3, shrink4: prevShrink4 } = prevProps;
        const { shrink3, shrink4 } = this.props;

        if (prevShrink3 && prevShrink3 !== shrink3) {
            if (shrink3) {
                setSmallWindow(1, false);
            } else {
                setSmallWindow(1, this.wrap1);
            }
        }
        if (prevShrink4 && prevShrink4 !== shrink4) {
            if (shrink4) {
                setSmallWindow(2, false);
            } else {
                setSmallWindow(2, this.wrap2);
            }
        }
    }

    // 设置自动执行要查看的对象
    setAutoExecution(num, name) {
        store.dispatch({
            type: 'SET_AUTO_EXECUTION' + num,
            data: name,
        });
    }

    componentWillUnmount() {
        setSmallWindow(1, false);
        setSmallWindow(2, false);
    }

    Option = (
        <>
            <Option value="自动">自动</Option>
            {/* <Option value="绞车">绞车</Option> */}
            <Option value="左耙头">左耙头</Option>
            <Option value="右耙头">右耙头</Option>
            <Option value="艏吹">艏吹</Option>
            <Option value="艏喷">艏喷</Option>
            <Option value="舱内">舱内</Option>
            <Option value="泥门">泥门</Option>
            {/* <Option value="冲仓">冲仓</Option> */}
            {/* <Option value="溢流">溢流</Option> */}
        </>
    );

    render() {
        const { shrink3, shrink4, wrapShrink, autoExecution } = this.props;

        return (
            <div className='window-wrap right-window-boxs'>
                {
                    (shrink3)
                        ?
                        <div className='win-wrap shrink'>
                            <img alt="" onClick={() => { wrapShrink(3) }} />
                            左耙头
                        </div>
                        :
                        <div className='win-wrap'>
                            <img alt="" onClick={() => { wrapShrink(3) }} />
                            <div className='win-wrap-head'>
                                <span>{autoExecution[0] || '左耙头'}</span>

                                <Select
                                    size='small'
                                    bordered={false}
                                    defaultValue="自动"
                                    style={{ width: 100 }}
                                    onChange={v => {
                                        if (v !== '自动') {
                                            updatelookAtObject(1, v);
                                            this.setAutoExecution(1, v);
                                        }
                                        rightWindowInfo.win1.selectName = v;
                                    }}
                                >
                                    {this.Option}
                                </Select>
                            </div>
                            <div id='right-win-chart1' className='win-wrap-view' ref={(mount) => { this.wrap1 = mount }} />
                            {/* <div className='win-wrap-foot'>左耙头吸口到位：True</div> */}
                        </div>
                }

                {
                    (shrink4)
                        ?
                        <div className='win-wrap shrink'>
                            <img alt="" onClick={() => { wrapShrink(4) }} />
                            右耙头
                        </div>
                        :
                        <div className='win-wrap'>
                            <img alt="" onClick={() => { wrapShrink(4) }} />
                            <div className='win-wrap-head'>
                                <span>{autoExecution[1] || '右耙头'}</span>

                                <Select
                                    size='small'
                                    bordered={false}
                                    defaultValue="自动"
                                    style={{ width: 100 }}
                                    onChange={v => {
                                        if (v !== '自动') {
                                            updatelookAtObject(2, v);
                                            this.setAutoExecution(2, v);
                                        }
                                        rightWindowInfo.win2.selectName = v;
                                    }}
                                >
                                    {this.Option}
                                </Select>
                            </div>
                            <div id='right-win-chart2' className='win-wrap-view' ref={(mount) => { this.wrap2 = mount }} />
                            {/* <div className='win-wrap-foot'>右耙头吸口到位：False</div> */}
                        </div>
                }
            </div>
        )
    }
}

class WindowWraps extends Component {

    constructor(props) {
        super(props);
        this.state = {
            shrink1: true,
            shrink2: true,
            shrink3: true,
            shrink4: true,
        };
    }

    onAllShrink = () => {
        const { shrink1, shrink2, shrink3, shrink4 } = this.state;
        if (!shrink1 && !shrink2 && !shrink3 && !shrink4) {

            this.setState({
                shrink1: true,
                shrink2: true,
                shrink3: true,
                shrink4: true,
            })
        } else {
            this.setState({
                shrink1: false,
                shrink2: false,
                shrink3: false,
                shrink4: false,
            })
        }
    }

    wrapShrink = (num) => {
        const { shrink1, shrink2, shrink3, shrink4 } = this.state;
        if (num === 1) {
            this.setState({ shrink1: !shrink1 })
        } else if (num === 2) {
            this.setState({ shrink2: !shrink2 })
        } else if (num === 3) {
            this.setState({ shrink3: !shrink3 })
        } else if (num === 4) {
            this.setState({ shrink4: !shrink4 })
        }
    }

    render() {
        const { shrink1, shrink2, shrink3, shrink4 } = this.state;
        return (
            <>
                <div className='window-wraps'>
                    {/* <LeftWinWrap
                        shrink1={shrink1}
                        shrink2={shrink2}
                        wrapShrink={this.wrapShrink}
                    /> */}
                    <RightWinWrap
                        shrink3={shrink3}
                        shrink4={shrink4}
                        wrapShrink={this.wrapShrink}
                        autoExecution={this.props.autoExecution}
                    />
                </div>
                <div id='all-shrink-btn' onClick={this.onAllShrink}></div>
            </>
        );
    }

}

class Scene extends Component {

    render() {

        // console.log(this.props);

        const { scenePageInfo, autoExecution } = this.props;

        // console.log(connect(mapStateToProps1)(ToolCol1));


        return (
            <div id='scene-wrap'>
                {/* 3d模块 */}
                <div className='viewport-container'>
                    <Object3d />
                </div>
                {/* 场景页面工具条 */}
                <div className='tool-row'>
                    <ToolCol1 scenePageInfo={scenePageInfo} />
                    {/* {connect(mapStateToProps1)(ToolCol1)} */}
                    <ToolCol2 />
                    <ToolCol3 scenePageInfo={scenePageInfo} />
                </div>
                {/* 窗口块 */}
                <WindowWraps autoExecution={autoExecution} />
            </div>
        )

    }
}

function mapStateToProps(state) {
    return {
        scenePageInfo: state.scenePageInfo,
        autoExecution: state.autoExecution,
    }
}

export default connect(mapStateToProps)(Scene);
